<template>
    <n-popconfirm @positive-click="handlePositiveClick">
        <template #trigger>
            <n-button
                type="error"
                secondary
                size="tiny"
                :loading="loading"
                v-bind="buttonProps"
            >
                <template #icon>
                    <n-icon>
                        <DeleteOutlineRound />
                    </n-icon>
                </template>
                删除
            </n-button>
        </template>
        你确定删除这条数据吗？
    </n-popconfirm>
</template>

<script setup lang="ts">
import { DeleteOutlineRound } from '@vicons/material'
import { ButtonProps, useMessage } from 'naive-ui'
import { PropType, ref } from 'vue'

const emits = defineEmits(['done'])

const props = defineProps({
    service: {
        type: Function as PropType<(params?: any) => Promise<unknown>>,
        required: true
    },
    buttonProps: {
        type: Object as PropType<ButtonProps>
    }
})

const message = useMessage()
const loading = ref(false)
function handlePositiveClick() {
    loading.value = true
    props
        .service()
        .then(() => {
            emits('done')
            message.success('删除成功')
        })
        .catch((e: Error) => {
            message.error(e.message)
        })
        .finally(() => (loading.value = false))
}
</script>
